import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

const router = new VueRouter({
    routes: [
        {
            name: "about",
            path: "/about",
            component: About,
            meta: { needAuth: true },
        },
        {
            name: "home",
            path: "/home",
            component: Home,
            children: [
                {
                    name: "news",
                    path: "news",
                    component: News,
                    meta: { needAuth: true },
                    // 独享路由守卫，只有before，没有after
                    // beforeEnter: (to, from, next) => {
                    //     if (to.meta.needAuth) {
                    //         if (localStorage.account == "root") {
                    //             document.title = to.name;
                    //             next();
                    //         } else {
                    //             alert("无查看权限");
                    //         }
                    //     } else {
                    //         next();
                    //     }
                    // },
                },
                {
                    name: "message",
                    path: "message",
                    component: Message,
                    meta: { needAuth: true },
                    children: [
                        {
                            name: "detail",
                            path: "detail/:id/:title",
                            component: Detail,
                            // 第一种写法：props为对象，传递的数据固定，极少用到
                            // props: { id: 1, title: "message1" },
                            // 第二种写法，props为布尔值，把路由收到的所有params参数通过props传递给当前组件(只能传递params参数)
                            // props: true,
                            // 第三种写法：props值为函数，该函数中的每一对key-value通过props传给当前组件
                            props(route) {
                                return {
                                    id: route.params.id,
                                    title: route.params.title,
                                };
                            },
                            // props(route) {
                            //     return {
                            //         id: route.query.id,
                            //         title: route.query.title,
                            //     };
                            // },

                            // 对象解构赋值，就是{ XXX属性 }，如果存在多重，可以多重解构 { XXX属性:{ xx, yy:{ z } } }
                            // props({ params: { id, title } }) {
                            //     return {
                            //         id,
                            //         title,
                            //     };
                            // },
                        },
                    ],
                },
            ],
        },
    ],
});

// 全局前置路由守卫，在页面初始化、切换路由之前调用
// router.beforeEach((to, from, next) => {
//     // to and from are both route objects. must call `next`.
//     if (to.meta.needAuth) {
//         if (localStorage.account == "root") {
//             next();
//         } else {
//             alert("无查看权限");
//         }
//     } else {
//         next();
//     }
// });

// 全局后置路由首位，在路由跳转之后调用
// router.afterEach((to, from) => {
//     // to and from are both route objects.
//     document.title = to.name || "Demo";
// });

export default router;
